<template>
    <li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{backgroundColor: bgColor,color: myColor}">
        <label>
            <input type="checkbox" v-model="isComplate"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" v-show="isShow" @click="deleteTodo">删除</button>
    </li>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { Todo } from '../types/todo'
export default defineComponent({
    name: 'Item',
    props: {
        todo: {
            type: Object as () => Todo, // 函数返回的是Todo类型
            required: true
        },
        index: {
            type: Number,
            required: true
        },
        delTodo: {
            type: Function,
            required: true
        },
        updateTodo: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        const bgColor = ref('white')
        const myColor = ref('black')
        const isShow = ref(false)
        // 鼠标进入/里离开的回调
        const mouseHandler = (flag: boolean) => {
            if (flag) {
                bgColor.value = 'pink';
                myColor.value = 'green';
                isShow.value = true
            } else {
                bgColor.value = 'white';
                myColor.value = 'black';
                isShow.value = false
            }
        }
        // 删除数据
        const deleteTodo = () =>  {
            // 提示
            if(window.confirm('确定要删除吗？')) {
                props.delTodo(props.index)
            }
        }
        // 计算属性的方式---让当前的复选框选中
        const isComplate = computed({
            get() {
                return props.todo.isComplated
            },
            set(val) {
                // props.todo.isComplated
                props.updateTodo(props.todo, val)
            }
        })
        return {
            bgColor,
            myColor,
            isShow,
            mouseHandler,
            deleteTodo,
            isComplate
        }
    },
})
</script>
<style scoped>
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}
li label {
    float: left;
    cursor: pointer;
}
li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}
li button {
    float: right;
    margin-top: 3px;
}
li::before {
    content: initial;
}
li:last-child {
    border-bottom: none;
}

</style>